<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-button type="primary" @click="addSubmit">更新</el-button>
            <el-button type="primary" @click="handleAdd">添加礼物</el-button>
            <el-button type="primary" @click="handleViewData">添加奖励</el-button>
            <el-button type="primary" @click="handleViewLog">编辑</el-button>

            <div class="infoBox">
                <div class="info_1">
                    <div class="info_2">
                        <span>展馆名称：</span>
                        <el-input placeholder="请输入展馆名称" v-model="title" disabled></el-input>
                    </div>
                    <div class="info_2">
                        <span>排序：</span>
                        <el-input placeholder="请输入内容" v-model="sort" disabled></el-input>
                    </div>
                </div>

                <div class="info_1">
                    <div class="info_2">
                        <span>普通展馆图片：</span>
                        <el-image :src="lower_picture" fit="fill" class="picture"></el-image>
                    </div>
                    <div class="info_2">
                        <span>高级展馆图片：</span>
                        <el-image v-if="high_picture" :src="high_picture" fit="fill" class="picture"></el-image>
                    </div>
                </div>


                <div class="info_1">
                    <div class="info_2">
                        <span>备注：</span>
                        <el-input
                            type="text"
                            placeholder="请输入备注"
                            v-model="note"
                            maxlength="20"
                            show-word-limit
                            disabled
                        ></el-input>
                    </div>
                    <div class="info_2">
                        <span>奖励：</span>
                        <div class="awardBox">
                            <div v-for="(item, index) in awardList" :key="item.reward_id" class="awardInfo">
                                <img :src="item.picture" alt="">
                                <span class="closeIcon" @click="handleRemoveReward(index)">X</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="80px"></el-table-column>
                <el-table-column label="礼物ID">
                    <template slot-scope="{row}">
                        {{ row.id||row.gift_id }}
                    </template>
                </el-table-column>
                <el-table-column label="礼物名称" prop="name"></el-table-column>
                <el-table-column label="礼物图片" prop="picture">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.picture" fit="fill" :lazy="true" class="giftIcon"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="礼物价格(M豆)" prop="price"></el-table-column>
                
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <!-- <cus-pagination
            v-show="total > 0"
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="getTableData"
            /> -->
        </el-card>
  
        <el-dialog
            :visible.sync="dialogVisible"
            title="添加礼物"
            width="30%"
            @close="closeDialog('form')"
        >
            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="120px" size="normal">
                <el-form-item label="礼物ID" prop="giftId">
                    <el-input
                    v-model="formData.giftId"
                    placeholder="请输入礼物ID"
                    />
                </el-form-item>
            
            </el-form>
    
            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddGift">确定</el-button>
            </span>
        </el-dialog>
    
        <el-dialog
            :visible.sync="dialogVisible2"
            title="添加礼物"
            width="30%"
            @close="closeDialog('form')"
        >
            <el-form ref="form2" :inline="false" :model="giftFormData" :rules="rules2" label-width="120px" size="normal">
                <el-form-item label="礼物ID：">
                    <el-input placeholder="礼物ID" v-model="giftFormData.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="礼物名称：">
                    <el-input placeholder="礼物名称" v-model="giftFormData.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="礼物单价：">
                    <el-input placeholder="礼物单价" v-model.number="giftFormData.price" disabled>
                        <template slot="append">M豆</template>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="排序：" prop="sort">
                    <el-input placeholder="请输入排序" v-model.number="giftFormData.sort"></el-input>
                </el-form-item> -->
            
            </el-form>
    
            <span slot="footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </span>
        </el-dialog>


        <!-- 添加奖励 -->
        <el-dialog
            :visible.sync="dialogVisible3"
            title="添加奖励"
            width="30%"
            @close="closeDialog('rewardForm')"
        >
            <el-form ref="rewardForm" :inline="false" :model="rewardData1" :rules="rewardDataRules1" label-width="120px" size="normal">
                <el-form-item label="装饰ID" prop="rewardId">
                    <el-input
                    v-model="rewardData1.rewardId"
                    placeholder="请输入装饰ID"
                    />
                </el-form-item>
            
            </el-form>
    
            <span slot="footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="handleAddReward">确定</el-button>
            </span>
        </el-dialog>
    
        <el-dialog
            :visible.sync="dialogVisible4"
            title="添加奖励"
            width="30%"
            @close="closeDialog('rewardForm')"
        >
            <el-form ref="rewardForm" :inline="false" :model="rewardData" :rules="rewardDataRules" label-width="120px" size="normal">
                <el-form-item label="装饰ID：">
                    <el-input placeholder="装饰ID" v-model="rewardData.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="装饰名称：">
                    <el-input placeholder="装饰名称" v-model="rewardData.title" disabled></el-input>
                </el-form-item>
                <el-form-item label="装饰单价：">
                    <el-input placeholder="装饰单价" v-model.number="rewardData.price" disabled>
                        <template slot="append">M豆</template>
                    </el-input>
                </el-form-item>
            
            </el-form>
    
            <span slot="footer">
            <el-button @click="dialogVisible4 = false">取消</el-button>
            <el-button type="primary" @click="onSubmitReward">确定</el-button>
            </span>
        </el-dialog>

        <addEditModal
            :dialogVisible.sync="addDialogVisible"
            :title.sync="dialogTitle"
            :info="info"
            @updateTable="updateTable"
            
        ></addEditModal>
    </div>
</template>
  
<script>
    import { hallDetail, hallSave, hallProduct, hallRenew, hallGift } from '@/api/giftPavilion'
    import addEditModal from './childComps/addEditModal'
  
  	export default {
        name: 'giftPavilionDetails',
        components: {
            addEditModal
        },
        data() {
            return {
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                info: {},
                addDialogVisible: false,
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                dialogVisible4: false,
                title: undefined,
                sort: undefined,
                lower_picture: undefined,
                lower_frame: undefined,
                high_picture: undefined,
                high_frame: undefined,
                note: undefined,
                giftFormData: {
                    id: null,
                    name: undefined,
                    price: undefined,
                    sort: undefined
                },
                rules2: {
                    // sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
                },
                formData: {
                    giftId: undefined
                },
                rules: {
                    giftId: [{ required: true, message: '请输入礼物ID', trigger: 'blur' }]
                },
                rewardData1: {
                    rewardId: undefined
                },
                rewardDataRules1: {
                    rewardId: [{ required: true, message: '请输入装饰ID', trigger: 'blur' }],
                },
                rewardData: {
                    sort: undefined
                },
                rewardDataRules: {
                    // sort: [{ required: true, message: '请输入装饰排序', trigger: 'blur' }],
                },
                loading: false,
                form: {
                    session: ''
                },
                banForm: {
                    reason: ''
                },
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                index: undefined,
                awardList: [],
                dialogTitle: '',
                updateInfo: {}
            }
        },
        created() {
            this.listQuery.id = this.$route.query.id || undefined
            this.getTableData()
        },
        methods: {
            updateTable(data) {
                console.log(data)
                this.title = data.title
                this.lower_picture = data.lower_picture
                this.high_picture = data.high_picture
                this.note = data.note
                this.sort = data.sort
                this.updateInfo = {
                    title: data.title,
                    id: data.id,
                    sort: data.sort,
                    lower_picture: data.lower_picture,
                    lower_frame: data.lower_frame,
                    high_picture: data.high_picture,
                    high_frame: data.high_frame,
                    note: data.note,
                    default_title: data.default_title,
                    lower_title: data.lower_title,
                    high_title: data.high_title,
                    lower_bg: data.lower_bg,
                    high_bg: data.high_bg,
                    default_picture: data.default_picture,
                    lower_collect_banner_id: data.lower_collect_banner_id,
                    high_collect_banner_id: data.high_collect_banner_id,
                    collect_special: data.collect_special,
                    lower_collect_banner_color: {
                        default: data.lower_collect_banner_color.default,
                        user: data.lower_collect_banner_color.user,
                        name: data.lower_collect_banner_color.name,
                        task: data.lower_collect_banner_color.task,
                    },
                    high_collect_banner_color:  {
                        default: data.high_collect_banner_color.default,
                        user: data.high_collect_banner_color.user,
                        name: data.high_collect_banner_color.name,
                        task: data.high_collect_banner_color.task,
                    },
                    is_push: data.is_push,
                    default_large_picture: data.default_large_picture,
                    lower_large_picture: data.lower_large_picture,
                    high_large_picture: data.high_large_picture,
                    default_bg_picture: data.default_bg_picture,
                }
            },
            indexMethod(index) {
                return this.tableData.length - index
            },
            addSubmit() {
                // if(!this.awardList.length) {
                //     this.$message({
                //         type: 'warning',
                //         message: '请添加奖励'
                //     })
                //     return false
                // }
                // if(!this.tableData.length) {
                //     this.$message({
                //         type: 'warning',
                //         message: '请添加礼物'
                //     })
                //     return false
                // }
                this.setHallSave()
                
            },
            addOrEditGift(data) {
                addOrEdit(data).then(res => {
                    if(res.code === 200) {
                        this.dialogVisible2 = false
                        this.getTableData()
                    }
                })
            },
            // 添加奖励
            handleViewData() {
                this.dialogVisible3 = true
            },
            // 编辑
            handleViewLog() {
                this.dialogTitle = 'edit'
                this.addDialogVisible = true
            },
        
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const detail = await hallDetail(this.listQuery)
                if (detail.code === 200) {
                    this.tableData = detail.data.gift
                    this.awardList = detail.data.reward
                    this.title = detail.data.info.title
                    this.lower_picture = detail.data.info.lower_picture
                    this.high_picture = detail.data.info.high_picture
                    this.note = detail.data.info.note
                    this.sort = detail.data.info.sort
                    this.info = detail.data.info
                    this.updateInfo = detail.data.info
                }
                this.loading = false
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
            },
            handleAdd() {
                this.dialogVisible = true
            },
            handleAddGift() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        hallGift({
                            id: this.formData.giftId
                        }).then(res => {
                            if(res.code === 200) {
                                this.giftFormData = res.data
                                this.dialogVisible = false
                                this.dialogVisible2 = true
                            }
                            
                        })
                    }
                })
            },
            handleAddReward() {
                this.$refs['rewardForm'].validate(valid => {
                    if (valid) {
                        hallProduct({
                            id: this.rewardData1.rewardId
                        }).then(res => {
                            if(res.code === 200) {
                                this.rewardData = res.data
                                this.dialogVisible3 = false
                                this.dialogVisible4 = true
                            }
                        })
                    }
                })
            },
            onSubmit() {
                this.$refs['form2'].validate(valid => {
                    if (valid) {
                        this.giftFormData.gift_id = this.giftFormData.id
                        this.tableData.unshift(this.giftFormData)
                        this.dialogVisible2 = false
                    }
                })
            },
            onSubmitReward() {
                this.$refs['rewardForm'].validate(valid => {
                    if (valid) {
                        this.rewardData.reward_id = this.rewardData.id
                        this.awardList.push(this.rewardData)
                        this.dialogVisible4 = false
                    }
                })
                
            },
            handleRemoveReward(index) {
                this.$confirm('奖励删除后点击更新才能生效', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.awardList.splice(index,1)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                
            },
            handleDelete(scope) {
                this.$confirm('礼物删除后点击更新才能生效', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(scope.$index,1)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            setHallSave() {
                this.updateInfo.lower_collect_banner_color = JSON.stringify(this.updateInfo.lower_collect_banner_color)
                this.updateInfo.high_collect_banner_color = JSON.stringify(this.updateInfo.high_collect_banner_color)
                hallSave(this.updateInfo).then(res => {
                    if(res.code === 200) {
                        let reward = []
                        let gift_ids = []
                        if(this.awardList.length) {
                            this.awardList.map(item => {
                                reward.push(item.reward_id)
                            })
                        }else {
                            reward = undefined
                        }
                        if(this.tableData.length) {
                            this.tableData.map(item => {
                                gift_ids.push(item.gift_id)
                            })
                        }else {
                            gift_ids = undefined
                        }
                        
                        hallRenew({
                            id: this.$route.query.id,
                            gift_ids: gift_ids,
                            reward_ids: reward
                        }).then(res => {
                            if(res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '更新成功'
                                })
                                this.getTableData()
                            }
                        })
                        
                    }
                })
            }
        }
    }
</script>
  
<style lang="scss" scoped>
.infoBox {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border: 1px solid #999999;
    border-radius: 10px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    box-sizing: border-box;
    padding-right: 30px;
    .info_1{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;

        .info_2{
            margin-top: 15px;
            display: flex;
            align-items: center;
            position: relative;

            span{
                width: 180px;
                text-align: right;
            }
            .tip{
                color: red;
                font-size: 12px;
                position: absolute;
                top: 100%;
                left: 120px;
            }

            .awardBox {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 100%;

                .awardInfo {
                    margin-right: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                    background-color: aquamarine;
                    position: relative;

                    .closeIcon {
                        position: absolute;
                        top: -8px;
                        right: -4px;
                        display: block;
                        width: 16px;
                        height: 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 10px;
                        background-color: aliceblue;
                        border-radius: 16px;
                        overflow: hidden;
                        cursor: pointer;
                    }
                }
            }

            .picture {
                width: 80px;
                display: block;
            }
        }
    }
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
.giftIcon {
    width: 80px;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  